<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>
			小于12px字体大小 -
			https://blog.csdn.net/may_he/article/details/121693584
		</title>
		<style>
			div {
				font-size: 12px;
			}

			svg {
				width: 100px;
				height: 100px;
				background-color: red;
			}

			svg text {
				font-size: 10px;
			}

			.chrome_adjust {
				font-size: 12px;
				/* transform属性进行的所有操作都不会改变标签的实际大小和占用空间，例如使用transform: scale()缩小2倍时，该元素的实际占用空间仍然为缩小前的大小，解决的方法就是在该元素的外层套上一个标签，该标签的大小为缩小的那个标签缩小后的尺寸，
                使用overflow: hidden属性可将多余的部分隐藏掉 
                （内容缩放， div 宽度和高度不变）*/
				transform: scale(0.833333);
				/* zoom可以将标签等比例进行放大或缩小的操作，实际占用的空间也会改变，但zoom在进行缩小时，
                部分样式依然会受到浏览器的限制，例如最小字号为12px */
				zoom: 0.5;
			}
		</style>
	</head>

	<body>
		<h1>svg</h1>
		<svg>
			<!-- svg是矢量图的概念方法，这里的文本并不支持换行显示，即使你设置的svg的宽高足够大 -->
			<!-- text文本设置样式的方法和普通标签设置的方法不一样，例如文本颜色填充是用fill设置，并不是color -->
			<text x="50" y="50">我是10px字体大小</text>
			>
		</svg>
		<hr />
		<h1>transform + zoom</h1>
		<div class="chrome_adjust">
			<span>
				远古时代，有姓有氏，姓氏一分为二。姓是大的氏族部落集团的徽示，氏是一个姓所分出的小氏族支系的标志。姓氏合二为一，是秦汉时才开始的。溯嬴姓渊源，颛顼高阳氏之孙皋陶（八恺之庭坚），皋陶生于山西洪洞（一说曲阜），舜因而赐以嬴姓。
				[1]
				嬴姓赵氏始于西周造父，造父为伯益的十五世孙。据《史记》载：“穆王使造父御，西巡狩，见西王母，乐之忘归。而徐偃王反，穆王日驰千里马，攻徐偃王，大破之。乃赐造父以赵城，由此为赵氏。”
			</span>
		</div>
		<div>haha</div>
	</body>
</html>
